<!doctype html>
<html lang="en">

<head>
	<title>A*寻路算法(threeJS)</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel=stylesheet href="css/base.css" />
	<style>
		#inset {
			width: 200px;
			height: 200px;
			background-color: #fff;
			/* or transparent; */
			border: 1px solid black;
			/* or none; */
			margin: 20px;
			padding: 0px;
			position: absolute;
			right: 0px;
			top: 0px;
			z-index: 100;
		}

		#csvFileInput {
			position: absolute;
			left: 0px;
			opacity: 0;
			top: 0px;
			z-index: 100;
		}
	</style>

</head>

<body>

	<script src="js/three.min.js"></script>
	<script src="js/Detector.js"></script>
	<script src="js/Stats.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/THREEx.KeyboardState.js"></script>
	<script src="js/THREEx.FullScreen.js"></script>
	<script src="js/THREEx.WindowResize.js"></script>
	<script type="text/javascript" src="js/astar.js"></script>
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script src="js/Mapbox3DTiles.js"></script>
	<script type="text/javascript" src="js/CanvasRenderer.js"></script>
	<script type="text/javascript" src="js/Projector.js"></script>
	<link rel=stylesheet href="css/jquery-ui.css" />

	<div><button type="button" name="seach" onclick="FuncCSVInport()">CSV Import</button>
		<input type="file" id="csvFileInput" onchange="readCSVFile(this)" />
	</div>
	<div id="ThreeJS" style="position: absolute; left:0x; top:0px" onclick=""></div>
	<div id="inset"></div>



	<script>

		// MAIN

		// standard global variables
		var container, scene, camera, renderer, controls, stats, container2, scene2, camera2, renderer2;
		//var keyboard = new THREEx.KeyboardState();
		var graph = [];
		// custom global variables
		// var width = 200;
		// var height = 100;
		var length = 1000;
		var flex = 2;
		var maps;

		var girdCellWidth = 1;
		var halfGirdCellWidth = girdCellWidth / 2;
		var sphereRadius = girdCellWidth / 2;

		init();
		// //render();
		myanimate();
		// FUNCTIONS 		
		function init() {
			scene = new THREE.Scene();
			// SCENE
			// scene = new THREE.Scene();

			// CAMERA
			var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
			var VIEW_ANGLE = 90, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
			var raycaster;
			var CANVAS_WIDTH = 200;
			var CANVAS_HEIGHT = 200;
			camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
			camera.position.set(0, 1000, 0);
			// camera.position.set(graph.length / 2, 300, graph[0].length / 2);
			camera.lookAt(0, 0, 0);
			scene.add(camera);
			// camera.lookAt(graph.length / 2, 0, graph[0].length / 2);
			// RENDERER
			if (Detector.webgl)
				renderer = new THREE.WebGLRenderer({ antialias: true });
			else
				renderer = new THREE.CanvasRenderer();
			renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
			container = document.getElementById('ThreeJS');
			container.appendChild(renderer.domElement);
			// EVENTS
			THREEx.WindowResize(renderer, camera);
			THREEx.FullScreen.bindKey({ charCode: 'm'.charCodeAt(0) });
			// CONTROLS
			// controls = new THREE.OrbitControls(camera);
			controls = new THREE.OrbitControls(camera, renderer.domElement);
			// STATS
			// dom

			stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.bottom = '0px';
			stats.domElement.style.zIndex = 100;
			container.appendChild(stats.domElement);
			// LIGHT
			var light = new THREE.PointLight(0xffffff);
			light.position.set(-100, 200, 100);
			scene.add(light);
			var ambientLight = new THREE.AmbientLight(0x111111);
			scene.add(ambientLight);

			console.log(Mapbox3DTiles)
			
			
			bridge = new Mapbox3DTiles.Layer({
				id: 'bridge',
				url: '../finalCloudf/tileset.json',
				color: 0xffffff,
				opacity: 20,
				pointsize: 1
			});
			bridge.onAdd(null, null, camera, scene, renderer);
			ridge = new Mapbox3DTiles.Layer({
				id: 'bridge',
				url: '../finalCloudg/tileset.json',
				color: 0x00ffff,
				opacity: 20,
				pointsize: 1
			});
		
			ridge.onAdd(null, null, camera, scene, renderer);
		}
		var bridge;
		function myanimate() {
			requestAnimationFrame(myanimate);
			bridge.render();
			ridge.render();
			controls.update();
			stats.update();
		}

	</script>

</body>

</html>